<template>
  <header>
    <div></div>
    <span>{{ $t("language.task.name") }}</span>
    <div class="clcire" @click.stop="$back">
      <el-icon color="#b5bac8"><CloseBold /></el-icon>
    </div>
  </header>

  <div class="task">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tablist"
        :label="$t(item.name)"
        :name="index"
      >
        <Transition name="fade">
          <component :is="item.component" />
        </Transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import novato from "../components/novato.vue";
import slots from "../components/slot.vue";
import mesa from "../components/mesa.vue";
import caca from "../components/caca.vue";
// import vitaliala from "../components/vitaliala.vue";
const activeName = ref(0);

let tablist = reactive([
  {
    name: "language.task.tab1",
    component: novato,
  },
  {
    name: "language.task.tab2",
    component: slots,
  },
  {
    name: "language.task.tab3",
    component: mesa,
  },
  {
    name: "language.task.tab4",
    component: caca,
  },
]);
const handleClick = (tab, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped lang="scss">
:deep(.el-tabs__item) {
  color: #b5bac8;
}
:deep(.el-tabs__nav-wrap.is-scrollable) {
  background-color: #141717;
}
:deep(.el-tabs__item.is-active) {
  color: #fff !important;
}
:deep(.el-tabs__active-bar) {
  background: #fff !important;
}
:deep(.el-tabs__nav-wrap::after) {
  background-color: #141717;
}
:deep(.el-tabs__nav-prev) {
  height: 40px;
  line-height: 40px;
}
:deep(.el-tabs__nav-next) {
  height: 40px;
  line-height: 40px;
}

header {
  height: 57px;
  @include flex(row, space-between, center);
  padding: 0 10px;
  background-color: rgb(50, 53, 62);
  div {
    width: 28px;
    height: 28px;
    border-radius: 14px;
  }
  span {
    font-size: 18px;
    color: #b5bac8;
    font-weight: bold;
  }
  .clcire {
    border: 2px solid #b5bac8;
    @include flex(row, center, center);
  }
}
.task {
  width: 100%;
  min-height: calc(100vh - 57px);
  background-color: rgb(50, 53, 62);
}
</style>
